<template>
    <div>


      搜索内容：<el-input v-model="vo.keyWord" placeholder="请输入角色或拼音搜索" style="width: 222px"></el-input>
      <el-button type="primary" icon="el-icon-search" circle @click="search(1)"></el-button>
      <el-button type="primary" icon="el-icon-first-aid-kit" circle @click="toAdd"></el-button>



        <input type="button" @click="search()" value="新增">

        <el-button   @click="deletebyids()"  type="danger">批量刪除</el-button>
        


        <el-table
                :data="tableData"
                border
                style="width: 100%">

            <el-table-column
                    fixed
                    prop="id"
                    label="選擇"
                    type="selection"
                    width="150">
            </el-table-column>
                
            <el-table-column
                    fixed
                    prop="id"
                    label="主健"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="password"
                    label="口令"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="nickname"
                    label="昵称"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="birthday"
                    label="生日"
                    width="300">
            </el-table-column>
            <el-table-column
                    prop="gender"
                    label="性别"
                    width="120">
            </el-table-column>

            <el-table-column
                    prop="locked"
                    label="锁定"
                    width="120">
            </el-table-column>





            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.$index,scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="danger" size="small" @click="deleteByid(scope.row.id)">删除</el-button></el-button>

                </template>
            </el-table-column>
        </el-table>

            <el-pagination
            background
            layout="prev, pager, next"
            :current-page="currPage"
            :page-size="pageSize"
            :total="pageTotal"
            @current-change="handlePageChange"
            >
            </el-pagination>

        <el-button type="text" @click="handAdd()">新增</el-button>



        <el-dialog title="新加用户" :visible.sync="dialogFormVisible">

            <el-form :model="form">

                <el-form-item label="id" :label-width="formLabelWidth">
                    <el-input v-model="form.id" autocomplete="off" disabled="true"></el-input>
                </el-form-item>

                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="密码" :label-width="formLabelWidth">

                    <el-input placeholder="请输入密码" v-model="form.password"  show-password></el-input>
                </el-form-item>

                <el-form-item label="昵称" :label-width="formLabelWidth">
                    <el-input v-model="form.nickname" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="性別" :label-width="formLabelWidth">
                  <el-radio v-model="form.gender" label="1">男</el-radio>
                  <el-radio v-model="form.gender" label="0">女</el-radio>
                </el-form-item>

                <el-form-item label="是否鎖定" :label-width="formLabelWidth">
                  <el-radio v-model="form.locked" label="0">鎖定</el-radio></el-radio></el-radio>
                  <el-radio v-model="form.locked" label="2">不鎖定</el-radio>
                </el-form-item>

 

                <el-form-item label="生日" :label-width="formLabelWidth">
                    <el-date-picker
                            v-model="form.birthday"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </el-form-item>

                <el-form-item label="选择职业" :label-width="formLabelWidth">
                    <el-select v-model="form.role" placeholder="请选择职业">
                        <el-option label="学生" value="0"></el-option>
                        <el-option label="老师" value="1"></el-option>
                        <el-option label="教务" value="2"></el-option>

                    </el-select>
                </el-form-item>

                <el-form-item label="url" :label-width="formLabelWidth">

                    <el-input placeholder="请输入内容" v-model="form.url">
                        <template slot="prepend">Http://</template>
                    </el-input>

                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save()">确 定</el-button>
            </div>
        </el-dialog>





    </div>
</template>

<script>

    import axios from 'axios'
    export default {
        methods: {
            handlePageChange(){

            },
            deletebyids(){
              if(this.multipleSelection.length == 0){
               alert("請選擇需要刪除的數據") ;
               return ;
              }
              let ids =[] ;
              this.multipleSelection.map(res=>{
                  ids.push(res.id) ;
              });
              alert(ids.length) ;

            //   axios.post(this.$baseUrl + '/cms/delByIds' , ids)
            //         .then(res=>{
            //             //刷新數據
            //             this.search();
            //             //將已經選擇好的 數據變量再一次清空
            //             this.multipleSelection = [];
            //             alert("批量刪除成功");
            //        })  ;

             
            },
            //保存于新添加在一起
            save(){

                if(this.form.id != null  ){
                   
                    //是修改，我們只是進行數據修改操作，根據主鍵不為空 判斷
                    axios.put(this.$baseUrl + '/cmsnew' , this.form)
                    .then(res=>{
                        success =   res.data.flag ;
                        // alert( "zhigao =" + success) ;
                    })  ;
                  
                    this.dialogFormVisible = false ;
                     this.search();



                }else{
                    // alert("hello") ;
                    axios.post(this.$baseUrl + '/cmsnew' , this.form)
                    .then(res=>{
                        success =   res.data.flag ;
                        // alert( "zhigao =" + success) ;
                    })  ;
                    // alert("helo3"); 
                    this.dialogFormVisible = false ;
                     this.search();

                }

            

            }
            ,
            handAdd(){
                this.form = {};
                this.dialogFormVisible = true ;

            }
            ,
            handleClick( idex , row) {
                alert(row.id) ;
                  this.dialogFormVisible = true ;
                this.form = row ;
                console.log(row);
            },
            deleteByid(row){
                axios.delete(this.$baseUrl+'cmsnew/'+row)
                    .then(res=>{
                        //刷新页面
                        this.search();
                    })

            },
             search(cp = 1){
             this.currPage = cp ;
             axios.post(this.$baseUrl+'/cmsnew/search'+ this.currPage + '/' + this.pageSize, this.vo)
             .then( res =>{
                 this.tableData = res.data.rows ;
                 this.pageTotal = res.data.total ;
             })

             },

            search1(){
                axios.post(this.$baseUrl+'/cms/getuser')
                    .then(res=>{
                        this.tableData = res.data.data ;
                        console.log(this.tableData);

                    })

            }
        },

        data(){
            return {
                tableData:[] ,
                //   dialogTableVisible: false,
                dialogFormVisible: false,
                multipleSelection:[],
                form: {
                    username: '',
                    password: '',
                    nickname: '',
                    birthday: '2022-09-09',
                    gender: '0',
                    locked: '0',
                    url: '',
                    id: 0,
                      currPage: 1,
                    pageSize: 5,
                    pageTotal:10
                  
                }


            }

        },
        created() {
            this.search();

        },


    }
</script>
